<%--
  Created by IntelliJ IDEA.
  User: dell
  Date: 2023/4/29
  Time: 23:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>学生信息修改</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
<%--    <script src="/js/jquery.js" type="text/javascript"></script>--%>
    <script src="/js/jquery.js" ></script>

    <script type="text/javascript">
<%--        加载完成ready--%>
        $(document).ready(function (e){
            <%--var initOption = "<option value='${stu.classId}'>${stu.className}</option>"--%>
            <%--$("#classIdSelect").html(initOption);--%>
            <%--// 点击事件触发--%>
            $("#departSelectId").change(function (){
                // alert($(this).val());
            //    通过选择改变后的院系编号来查班级信息
                var deptId = $(this).val();

                $.get("/studentServlet?type=queryClsByDeptId&deptId=" + deptId, function (data){
                    // console.log(data);
                //    相当于传过来了院校下的所有班级，要取出所需信息
                    if (data != null){
                        var optionHtml = "<option value='-1'>请选择班级~</option>";
                        for (var i = 0; i < data.length; i++) {
                            var cls = data[i];
                            // 每循环一次，就获取一个 <option value="" ></option>
                            // console.log(cls.id, cls.className);
                            // 直接拼接
                            optionHtml = optionHtml.concat("<option value='" + cls.id + "'>" + cls.className + "</option>");
                        }
                        // console.log(optionHtml);
                        $("#classSelect").html(optionHtml)
                    }
                });

            });
        });
    </script>
</head>

<body>

<div class="formbody">

    <div class="formtitle"><span>基本信息</span></div>
    <form action="/studentServlet" id="From">
        <ul class="forminfo">

            <c:if test="${empty stu}">
                <input type="hidden" name="type" value="save">
            </c:if>
            <c:if test="${not empty stu}">
                <input type="hidden" name="type" value="update">
                <input type="hidden" name="id" value="${stu.id}">
            </c:if>
            <li>
                <label>学号</label>
                <input name="stuNum" type="text" class="dfinput" value="${stu.stuNum}" />
                <i>标题不能超过30个字符</i>
            </li>
            <li>
                <label>姓名</label>
                <input name="stuName" type="text" class="dfinput" value="${stu.stuName}" />
                <i>多个关键字用,隔开</i>
            </li>
            <li>
                <label>手机号</label>
                <input name="phoneNum" type="text" class="dfinput" value="${stu.phoneNum}" />
                <i>多个关键字用,隔开</i>
            </li>
            <li>
                <label>性别</label>
                <select name="gender" class="dfinput" >
                    <option selected>男</option>
                    <option ${stu.gender == '女' ? 'selected' : ''} >女</option>
                </select>
            </li>
            <li>
                <label>地址</label>
                <input name="address" type="text" class="dfinput" value="${stu.address}" />
                <i>多个关键字用,隔开</i>
            </li>
            <li><label>所属院系</label>
                <select name="departId" class="dfinput" id="departSelectId" >
                    <option value="-1">请选择院系~</option>
                    <c:forEach items="${depts}" var="dept">
                        <option value="${dept.id}">${dept.department}</option>
                    </c:forEach>
                </select>
            </li>

            <li><label>所属班级</label>
                <select name="classId" class="dfinput" id="classSelect">
                    <option value='-1'>请选择班级~</option>
                </select>
            </li>
            <li>
                <label>&nbsp;</label>
                <input name="" type="submit" id="btn" class="btn" value="确认保存"/>
            </li>
        </ul>
    </form>

</div>
</body>
</html>